<template>
  <div class="wrapper" ref="picker">
    <div class="dropdown-picker hover-style" @click="handleClick">
      <div class="selected-content">
        {{selectedContent}}
      </div>
      <div class="icon border-left" :class="showSelections ? 'active' : ''">
        <i class="iconfont" :class="iconClass"></i>
      </div>
    </div>
    <div class="selections" v-if="showSelections">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      default: 'iconsx_shaixuan'
    },
    showSelections: {
      type: Boolean,
      default: true 
    },
    selectedContent: {
      type: String,
      default: '全部'
    }
  },
  mounted() {
    this.picker = this.$refs.picker
    window.addEventListener('click', (e) => {
      this.clickOutside(e, this.picker)
    })
  },
  destroyed() {
    window.removeEventListener('click', (e) => {
      this.clickOutside(e, this.picker)
    })
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
    clickOutside(e, el) {
      if (!el.contains(e.target)) {
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .wrapper 
    position relative 
    .dropdown-picker 
      min-width 146px 
      height 36px 
      box-sizing border-box 
      border-radius 3px 
      border 1px solid $color-divide-line
      background-color $color-text-button
      display flex
      align-items center
      .selected-content
        min-width 108px
        text-align center
        color $color-sub-grey
      .icon 
        width 36px 
        height 36px
        text-align center
        box-sizing border-box 
        display flex 
        align-items center 
        justify-content center 
        &.active 
          color $color-theme-red 
        .iconfont 
          font-size 14px 
    .selections 
      position absolute 
      top 35px
      left 0px 
      min-width 146px 
      height 100px 
      background #ccc 
      z-index 900
</style>